.topic {
    background-color: white;
    border:3px solid #f3f3f3;
    margin: 15px;
    text-align: center;
}

.profile {
    background: linear-gradient(0deg, rgba(255,255,255,0) 20%, rgba(232,211,26,1) 100%);
}

.profile-container {
    display: flex;
    align-items: flex-start; /* Verhindert, dass die Items vertikal gestreckt werden */
    background-color: white;
    border:3px solid #f3f3f3; /* Grauer Rand für die gesamte Box */
    padding: 20px;
    margin: 15px;
}

.name {
    text-align: center;
    font-weight: bold;
    font-size: 15px;
}

.profile-image img {
    width: 150px; /* Größe des Profilbildes */
    height: 150px; /* Größe des Profilbildes */
    margin: 20px; /* Abstand zwischen Bild und Info-Text */
}

.profile-info {
    display: flex;
    flex-direction: column;
    margin: 30px;
}

.info-section {
    display: flex;
    align-items: center; /* Zentriert die Checkmark und den Text vertikal */
    margin-bottom: 5px; /* Abstand zwischen den Zeilen */
}

.info-section img {
    margin-right: 10px; /* Abstand zwischen Checkmark und Text */
}

.info-section span {
    font-size: 16px; /* Größe des Textes */
}

@media (max-width: 768px) {
    .profile-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Zentriert die Inhalte der Container */
    }

    .profile {
        order: 1;
        width: 100%; /* Stellt sicher, dass der Container die volle Breite einnimmt */
        text-align: center; /* Zentriert den Text und das Bild innerhalb des Containers */
    }

    .profile-image {
        margin: 0 auto; /* Zentriert das Bild horizontal */
        display: block; /* Erzwingt, dass das Bild als Block-Element behandelt wird */
    }

    .profile-info {
        order: 2;
        width: 100%; /* Stellt sicher, dass der Info-Container die volle Breite einnimmt */
    }
}